$lv-col-prefix-cls: 'lv-col' !default;
$lv-grid-columns: 24 !default;

@mixin grid($class: '') {
  @include grid-columns($lv-grid-columns, $class);
}

@mixin grid-columns($index, $class) {
  @if $index > 0 {
    .#{$lv-col-prefix-cls}#{$class}-#{$index} {
      display: block;
      flex: 0 0 percentage(calc($index / $lv-grid-columns));
      max-width: percentage(calc($index / $lv-grid-columns));
    }

    .#{$lv-col-prefix-cls}#{$class}-push-#{$index} {
      left: percentage(calc($index / $lv-grid-columns));
    }
    .#{$lv-col-prefix-cls}#{$class}-pull-#{$index} {
      right: percentage(calc($index / $lv-grid-columns));
    }
    .#{$lv-col-prefix-cls}#{$class}-offset-#{$index} {
      margin-left: percentage(calc($index / $lv-grid-columns));
    }
    .#{$lv-col-prefix-cls}#{$class}-order-#{$index} {
      order: $index;
    }

    @include grid-columns(($index - 1), $class);
  } @else {
    .#{$lv-col-prefix-cls}#{$class}-#{$index} {
      display: none;
    }

    .#{$lv-col-prefix-cls}-push-#{$index} {
      left: auto;
    }
    .#{$lv-col-prefix-cls}-pull-#{$index} {
      right: auto;
    }
    .#{$lv-col-prefix-cls}#{$class}-push-#{$index} {
      left: auto;
    }
    .#{$lv-col-prefix-cls}#{$class}-pull-#{$index} {
      right: auto;
    }
    .#{$lv-col-prefix-cls}#{$class}-offset-#{$index} {
      margin-left: 0;
    }
    .#{$lv-col-prefix-cls}#{$class}-order-#{$index} {
      order: 0;
    }
  }
}
